<template>
  <div class="select-text-popup">
    <div class="content">
      <div class="image-group">
        <div class="image-group-radio">
          <el-radio-group v-model="searchParams.userid" size="large" @change="onImageChange">
            <el-radio-button :label="1" :value="1" v-if="userType != 1">我的素材</el-radio-button>
            <el-radio-button :label="-1" :value="-1" v-else>公共素材</el-radio-button>
          </el-radio-group>
        </div>

        <div class="image-group-content">
          <table-group
            width="200px"
            v-model="searchParams.group_id"
            :loading="groupLoading"
            :list="groupData"
            :options="{ label: 'name', id: '_id' }"
            isPreview
            :isCard="false"
            @on-change="onGroupChange"
          >
            <template #header> </template>
          </table-group>
        </div>
      </div>
      <scroll-checkout
        height="100%"
        keyField="_id"
        :items="virtualItems"
        :loading="virtualLoading"
        v-model:checkItems="virtualCheckItems"
        @on-scroll-end="onScrollEnd"
      >
        <template #default="{ item }">
          <div class="text-item">
            {{ item.content }}
          </div>
        </template>
      </scroll-checkout>
    </div>

    <div class="dialog-footer">
      <el-button plain @click="handleCancel"> 取 消 </el-button>
      <el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ScrollCheckout from '@/components/dom-scroll/scroll-checkout.vue';
import TableGroup from '@/components/group-menus/table-group.vue';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

import { getMaterialListText, getMaterialListTextGroup } from '@/apis/text';

const emit = defineEmits(['update:modelValue', 'on-end', 'on-close']);

const props = defineProps({
  modelValue: {
    type: [Array],
    default: () => [],
  },
  isCommon: {
    type: [Boolean],
    default: false,
  },
  // 0 普通用户 1 admin
  userType: {
    type: [String, Number],
    default: 0,
  },
});

const searchParams = ref({ group_id: '', group_type: '', userid: 1 });

if (props.userType == 1) {
  searchParams.value.userid = -1;
}

const groupLoading = ref(false);
const groupData = ref([]);
const initGetMaterialListGroup = async () => {
  groupLoading.value = true;
  const res = await getMaterialListTextGroup({ ...searchParams.value });
  groupLoading.value = false;
  if (res.code == 0) {
    groupData.value = [{ _id: '', name: '全部' }, ...res.data.data];
  }
};

const virtualItems = ref([]);

const virtualCheckItems = ref([]);

const virtualLoading = ref(false);

const imagesize = ref(50);

const initListImages = async () => {
  virtualLoading.value = true;
  let last_id = '';
  if (virtualItems.value.length > 0) {
    last_id = virtualItems.value[virtualItems.value.length - 1]._id;
  }
  const res = await getMaterialListText({
    last_id,
    size: imagesize.value,
    group_id: searchParams.value.group_id,
    userid: searchParams.value.userid,
  });
  virtualLoading.value = false;

  if (res.code == 0) {
    if (virtualItems.value.length == 0) {
      virtualItems.value = res.data.data;
    } else {
      virtualItems.value = virtualItems.value.concat(res.data.data);
    }
    console.log(virtualItems.value, 'virtualItems');
  }
};

const onScrollEnd = () => {
  if (!virtualLoading.value && virtualItems.value.length >= imagesize.value) {
    initListImages();
  }
};

const onGroupChange = () => {
  virtualItems.value = [];
  initListImages();
};

const onImageChange = () => {
  virtualItems.value = [];
  searchParams.value.group_id = '';
  initListImages();
  initGetMaterialListGroup();
};

const handleCancel = () => {
  modalStore.closeModal();
  emit('on-close');
};

const handleConfirm = () => {
  modalStore.closeModal();

  emit('update:modelValue', virtualCheckItems.value);
  emit('on-end', virtualCheckItems.value);
};

const initModal = () => {
  const data = modalStore.getModal('select-text-popup');

  virtualCheckItems.value = data.text_list || [];

  initGetMaterialListGroup();

  initListImages();
};

initModal();
</script>

<style lang="scss" scoped>
.select-text-popup {
  width: 100%;
  height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.image-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-right: 10px;
  // border-right: 1px dashed var(--el-border-color);
  box-sizing: border-box;
}

.image-group-radio {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.image-group-content {
  height: 100%;
}

.content {
  display: flex;
  flex: 1;
  height: 0;
}

.text-item {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 12px;
  box-sizing: border-box;
}
</style>
